<template>
  <div>
    <div class="banner">
      <div @click="handleClick">
        <img class="banner-img" :src="imgUrl"/>
      </div>
      <div class="banner-info">
        <div class="banner-title">全球最大的迪士尼城堡</div>
        <div class="banner-number"><span class="iconfont banner-icon">&#xe6c7;</span>39</div>
      </div>
    </div>
    <Gallary
     v-show="show"
     @click.native="show=!show"
     :imgList="imgList"
     ></Gallary>
  </div>
</template>

<script>
import Gallary from '@/components/common/Gallary'
export default {
  name: 'Detailbanner',
  props: {
    imgList: Array
  },
  components: {
    Gallary
  },
  data () {
    return {
      show: false,
      imgUrl: '',
      lastImgList: null
    }
  },
  methods: {
    handleClick () {
      // console.log(1)
      this.show = true
    }
  },
  /*
  mounted 不会保证所有的子组件也都一起被挂载。
  如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick：
  mounted: function () {
    this.$nextTick(function () {
      // Code that will run only after the
      // entire view has been rendered
    })
  }
  */
  mounted () {
    // console.log('渲染之后')
    // console.log(this.imgList)  __ob__获取空数据,因为props是异步传送数据
  },
  /* 1.更新可以做到,但是更适合用watch
  updated () {
    console.log('更新之后')
    console.log(this.imgList)
  },
  */
  watch: {
    imgList () {
      // console.log('侦听变化') 这样还有个缓存的效果,不会刷新页面反复执行
      if (this.imgList[0]) {
        this.imgUrl = this.imgList[0].imgUrl
      }
    }
  },
  activated () {
    // 如果我们 vue 组件中 template 里面添加了下标（靠数组索引得到的值），
    // 就会报索引为 undefined
    // 解决方法：
    // 在我们使用下标时，要在父组件上做条件判断，
    // 如果这个下标存在，然后就显示里面的内容，这样就不会报 undefined 了
  }
}
</script>

<style lang="stylus" scoped>
  .banner
    position relative
    overflow hidden
    height 0
    padding-bottom 55%
    .banner-img
      width 100%
    .banner-info
      display flex
      position absolute
      left 0
      right 0
      bottom 0
      line-height .4rem
      color #fff
      background-image linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.8))
      .banner-title
        flex auto    /*默认flex: 0 1 auto 放大,缩小,计算尺寸  auto(1 1 auto)*/
        font-size .36rem
        padding .2rem
      .banner-number
        margin-top .28rem
        margin-right .2rem
        padding 0 .2rem
        height .32rem
        line-height .32rem
        border-radius .2rem
        background rgba(0,0,0,.7)
        font-size .24rem
        .banner-icon
          font-size .24rem
          margin-right .06rem
</style>
